$(document).ready(function () {
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
    var ang = Math.PI / 10;
    draw(350.0, 400.0, 200.0);
    allClazz();
    allStudent();
    $("#b_search").click(function () {
        var userId = $("#selectStudent").val();
        var user = {
            id: userId
        };
        $.ajax({
            type: "get",
            url: "/ability/getAbilityByUserId",
            data: user,
            dataType: "json",
            success: function (data) {
                initDraw(350.0, 400.0, data);
            }
        })

    })

    $('#selectClazz').change(function () {
        $("#selectStudent").empty();
        allStudent($("#selectClazz").val());
    });

    function allClazz() {
        $.ajax({
            type: "GET",
            url: urlToUser + "/clazz/allClazz",
            dataType: "json",
            success: function (data) {
                if (data != null || data != "") {
                    var sClazz = $("#selectClazz");
                    for (var i in data) {
                        if (i == 0) {
                            sClazz.append("<option selected='selected' value=" + data[i].id + ">" + data[i].name + "</option>");
                            allStudent(data[i].id);
                        }
                        else {
                            sClazz.append("<option value=" + data[i].id + ">" + data[i].name + "</option>");
                        }

                    }
                }
            }
        })
    }

    function allStudent(clazzId) {

        var clazzID = clazzId;
        var clazz = {
            id: clazzID
        }
        $.ajax({
            type: "POST",
            url: urlToUser + "/user/getUserByClazzId",
            data: clazz,
            dataType: "json",
            success: function (data) {
                if (data != null || data != "") {
                    var sClazz = $("#selectStudent");
                    for (var i in data) {
                        if (data[i].type == "student") {
                            if (i == 0) {
                                sClazz.append("<option selected='selected' value=" + data[i].id + ">" + data[i].name + "</option>");
                            }
                            else {
                                sClazz.append("<option value=" + data[i].id + ">" + data[i].name + "</option>");
                            }
                        }
                    }
                }
            }
        })
    }

    function draw(x, y, r) {
        context.beginPath();
        context.moveTo(x, y - r);
        context.lineTo(x - Math.cos(ang) * r, y - Math.sin(ang) * r);
        context.lineTo(x - Math.cos(ang * 3) * r, y + Math.sin(ang * 3) * r);
        context.lineTo(x + Math.cos(ang * 3) * r, y + Math.sin(ang * 3) * r);
        context.lineTo(x + Math.cos(ang) * r, y - Math.sin(ang) * r);
        context.lineTo(x, y - r);
        context.closePath();
        context.fillStyle = "rgb(255,255,255)";
        context.fill();
        context.lineWidth = 2;
        context.strokeStyle = "black";
        context.stroke();

        context.beginPath();
        context.moveTo(x, y - r);
        context.lineTo(x, y);
        context.lineTo(x - Math.cos(ang) * r, y - Math.sin(ang) * r);
        context.moveTo(x - Math.cos(ang * 3) * r, y + Math.sin(ang * 3) * r);
        context.lineTo(x, y);
        context.lineTo(x + Math.cos(ang * 3) * r, y + Math.sin(ang * 3) * r);
        context.moveTo(x, y);
        context.lineTo(x + Math.cos(ang) * r, y - Math.sin(ang) * r);
        context.closePath();
        context.lineWidth = 1;
        context.strokeStyle = "rgb(195,195,195)";
        context.stroke();

        context.font = "30px cursive";
        context.fillStyle = "rgb(195,195,195)";
        context.fillText("荒废度", x - 45, y - r - 20);
        context.fillStyle = "red";
        context.fillText("执行能力", x - Math.cos(ang) * r - 130, y - Math.sin(ang) * r + 10);
        context.fillText("学习能力", x - Math.cos(ang * 3) * r - 60, y + Math.sin(ang * 3) * r + 40);
        context.fillText("沟通能力", x + Math.cos(ang * 3) * r - 60, y + Math.sin(ang * 3) * r + 40);
        context.fillText("信誉度", x + Math.cos(ang) * r + 10, y - Math.sin(ang) * r + 10);
    }

    function initDraw(x, y, json) {
        context.clearRect(0, 0, 1000, 630);
        draw(350.0, 400.0, 200.0);
        var r1 = json.laziness;
        var r2 = json.performAbility;
        var r3 = json.studyAbility;
        var r4 = json.talkAbility;
        var r5 = json.credibility;
        context.beginPath();
        context.moveTo(x, y - (100 - r1) * 2);
        context.lineTo(x - Math.cos(ang) * r2 * 2, y - Math.sin(ang) * r2 * 2);
        context.lineTo(x - Math.cos(ang * 3) * r3 * 2, y + Math.sin(ang * 3) * r3 * 2);
        context.lineTo(x + Math.cos(ang * 3) * r4 * 2, y + Math.sin(ang * 3) * r4 * 2);
        context.lineTo(x + Math.cos(ang) * r5 * 2, y - Math.sin(ang) * r5 * 2);
        context.lineTo(x, y - (100 - r1) * 2);
        context.closePath();
        context.fillStyle = "rgb(255,200,70)";
        context.fill();
        context.font = "20px cursive";
        context.fillStyle = "blue";
        context.fillText(r1 + "%", x - 8, y - (100 - r1) * 2 - 8);
        context.fillText(r2 + "%", x - Math.cos(ang) * r2 * 2 - 30, y - Math.sin(ang) * r2 * 2 + 8);
        context.fillText(r3 + "%", x - Math.cos(ang * 3) * r3 * 2 - 15, y + Math.sin(ang * 3) * r3 * 2 + 20);
        context.fillText(r4 + "%", x + Math.cos(ang * 3) * r4 * 2 - 15, y + Math.sin(ang * 3) * r4 * 2 + 20);
        context.fillText(r5 + "%", x + Math.cos(ang) * r5 * 2, y - Math.sin(ang) * r5 * 2 + 8);
    }
})

